/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* You can add global styles to this file, and also import other style files */
@use '@angular/material' as mat;
@use '../theme-colors.scss' as theme;

// Apply dark theme by default
html {
  @include mat.theme(theme.$dark-theme);
}

// Light theme override
html.light-theme {
  @include mat.theme(theme.$light-theme);
}

// Dark theme explicit class (for consistency)
html.dark-theme {
  @include mat.theme(theme.$dark-theme);
}

html {
  font-family: 'Google Sans', 'Helvetica Neue', sans-serif !important;
}

body {
  height: 100vh;
  margin: 0;
}

markdown p {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

// Ensure menus and overlays appear above all other content
.cdk-overlay-container {
  z-index: 9999 !important;
}

.mat-mdc-menu-panel {
  z-index: 10000 !important;
}

// Menu styling for both themes
.mat-mdc-menu-panel,
.mat-mdc-menu-panel .mat-mdc-menu-content {
  background-color: var(--mdc-dialog-container-color) !important;
}

.mat-mdc-menu-item,
.mat-mdc-menu-item .mdc-list-item__primary-text {
  color: var(--mdc-dialog-supporting-text-color) !important;
}

.mat-mdc-menu-item:hover,
.mat-mdc-menu-item:focus {
  background-color: var(--builder-tool-item-hover-background-color) !important;
}

.mat-mdc-menu-item .mat-icon {
  color: var(--mdc-dialog-supporting-text-color) !important;
}

// Snackbar (notification/warning) styling for both themes
.mat-mdc-snack-bar-container {
  --mdc-snackbar-container-color: var(--mdc-dialog-container-color) !important;
  --mdc-snackbar-supporting-text-color: var(--mdc-dialog-supporting-text-color) !important;
  --mat-snack-bar-button-color: var(--builder-text-link-color) !important;
}

.mdc-snackbar__surface {
  background-color: var(--mdc-dialog-container-color) !important;
}

.mdc-snackbar__label,
.mat-mdc-snack-bar-label {
  color: var(--mdc-dialog-supporting-text-color) !important;
}

.mat-mdc-snack-bar-action {
  color: var(--builder-text-link-color) !important;
}

// Dark theme custom properties
html.dark-theme {
  --mat-sys-primary: black;
  --mdc-checkbox-selected-icon-color: white;
  --mat-sys-background: #131314;
  // tab variable overrides
  --mat-tab-header-active-label-text-color: #8ab4f8;
  --mat-tab-header-active-hover-label-text-color: #8ab4f8;
  --mat-tab-header-active-focus-label-text-color: #8ab4f8;
  --mat-tab-header-label-text-weight: 500;
  --mdc-text-button-label-text-color: #89b4f8;

  // Select dropdown styling for dark theme
  --mat-select-trigger-text-color: #8ab4f8;
  --mat-select-panel-background-color: #2b2b2f;
  --mat-option-label-text-color: #e8eaed;
  --mat-option-hover-state-layer-color: rgba(255, 255, 255, 0.08);
  --mat-option-focus-state-layer-color: rgba(255, 255, 255, 0.08);
  --mat-option-selected-state-layer-color: rgba(138, 180, 248, 0.24);

  // Form field styling for dark theme
  --mat-form-field-container-text-color: white;
  --mdc-filled-text-field-input-text-color: white;
  --mdc-filled-text-field-label-text-color: #9aa0a6;
  --mdc-filled-text-field-container-color: #303030;
  --mdc-outlined-text-field-input-text-color: white;
  --mdc-outlined-text-field-label-text-color: #9aa0a6;
  --mat-form-field-state-layer-color: white;

  // Dialog text for dark theme
  --mdc-dialog-supporting-text-color: #e8eaed;
  --mat-dialog-content-text-color: #e8eaed;

  // Expansion panel text color for dark theme
  --mat-expansion-container-text-color: #e8eaed;
  --mat-expansion-header-text-color: #e8eaed;
  --adk-web-text-color-light-gray: #c4c7c5;
}

// Light theme custom properties
html.light-theme {
  --mat-sys-primary: #9AA0A6;
  --mdc-checkbox-selected-icon-color: #305f9d;
  --mat-sys-background: #ffffff;
  // tab variable overrides
  --mat-tab-header-active-label-text-color: #305f9d;
  --mat-tab-header-active-hover-label-text-color: #305f9d;
  --mat-tab-header-active-focus-label-text-color: #305f9d;
  --mat-tab-header-label-text-weight: 500;
  --mdc-text-button-label-text-color: #305f9d;

  // Fix select dropdown visibility
  --mat-select-trigger-text-color: #202124;
  --mat-select-panel-background-color: #ffffff;
  --mat-option-label-text-color: #202124;
  --mat-option-hover-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-focus-state-layer-color: rgba(0, 0, 0, 0.04);
  --mat-option-selected-state-layer-color: rgba(48, 95, 157, 0.12);

  // Fix form field visibility
  --mat-form-field-container-text-color: #202124;
  --mdc-filled-text-field-input-text-color: #202124;
  --mdc-filled-text-field-label-text-color: #5f5e5e;
  --mdc-filled-text-field-container-color: #f3f0f0;
  --mdc-outlined-text-field-input-text-color: #202124;
  --mdc-outlined-text-field-label-text-color: #5f5e5e;
  --mat-form-field-state-layer-color: #202124;

  // Fix dialog text visibility
  --mdc-dialog-supporting-text-color: #202124;
  --mat-dialog-content-text-color: #202124;

  // Expansion panel text color for light theme
  --mat-expansion-container-text-color: #202124;
  --mat-expansion-header-text-color: #202124;
  --adk-web-text-color-light-gray: #c4c7c5;
}

// Dark theme dialog overrides
html.dark-theme {
  // Custom property for dialog subhead font
  --mdc-dialog-subhead-font-family: 'Google Sans';
  --mdc-dialog-subhead-font-style: normal;
  --mdc-dialog-subhead-font-weight: 400;
  --mdc-dialog-subhead-font-size: 24px;
  --mdc-dialog-subhead-line-height: 32px;
  --mdc-dialog-subhead-color: #e3e3e3;

  @include mat.dialog-overrides(
    (
      container-color: #2b2b2f,
      subhead-color: white,
    )
  );
}

// Light theme dialog overrides
html.light-theme {
  // Custom property for dialog subhead font
  --mdc-dialog-subhead-font-family: 'Google Sans';
  --mdc-dialog-subhead-font-style: normal;
  --mdc-dialog-subhead-font-weight: 400;
  --mdc-dialog-subhead-font-size: 24px;
  --mdc-dialog-subhead-line-height: 32px;
  --mdc-dialog-subhead-color: #202124;

  @include mat.dialog-overrides(
    (
      container-color: #ffffff,
      subhead-color: #202124,
    )
  );
}

.mat-mdc-dialog-container .mat-mdc-dialog-title.mdc-dialog__title {
  font-family: var(--mdc-dialog-subhead-font-family);
  font-style: var(--mdc-dialog-subhead-font-style);
  font-weight: var(--mdc-dialog-subhead-font-weight);
  font-size: var(--mdc-dialog-subhead-font-size);
  line-height: var(--mdc-dialog-subhead-line-height);
  color: var(--mdc-dialog-subhead-color);
}

// Dark theme progress spinner and custom properties
html.dark-theme {
  --chat-panel-function-event-button-background-color: white;
  --chat-panel-function-event-button-highlight-background-color: rgb(
    15,
    82,
    35
  );
  --chat-panel-function-event-button-highlight-border-color: rgb(15, 82, 35);
  --chat-panel-function-event-button-highlight-color: white;
  --chat-panel-user-message-message-card-background-color: #004a77;
  --chat-panel-user-message-message-card-color: white;
  --chat-panel-bot-message-message-card-background-color: #303030;
  --chat-panel-bot-message-message-card-color: white;
  --chat-panel-bot-message-focus-within-message-card-background-color: #131314;
  --chat-panel-bot-message-focus-within-message-card-border-color: #8ab4f8;
  --chat-panel-message-textarea-background-color: #303030;
  --chat-panel-message-textarea-focus-background-color: #131314;
  --chat-panel-eval-compare-container-background-color: #484848;
  --chat-panel-actual-result-border-right-color: #8a8686;
  --chat-panel-eval-response-header-border-bottom-color: #8a8686;
  --chat-panel-header-expected-color: #44c265;
  --chat-panel-header-actual-color: #ff8983;
  --chat-panel-eval-pass-color: #44c265;
  --chat-panel-eval-fail-color: #ff8983;
  --chat-panel-input-field-textarea-color: white;
  --chat-panel-input-field-textarea-placeholder-color: #8e918f;
  --chat-panel-input-field-textarea-caret-color: white;
  --chat-panel-input-field-button-color: white;
  --chat-panel-input-field-button-background-color: rgb(51, 53, 55);
  --chat-panel-mat-mdc-mini-fab-background-color: white;
  --chat-panel-mat-mdc-mini-fab-mat-icon-color: black;
  --chat-panel-input-field-mat-mdc-text-field-wrapper-border-color: #8e918f;
  --chat-panel-delete-button-background-color: rgba(0, 0, 0, 0.7);
  --chat-panel-delete-button-color: white;
  --chat-panel-file-container-background-color: #1e1e1e;
  --chat-panel-thought-chip-background-color: #8ab4f8;
  --chat-panel-link-style-button-color: #007bff;
  --artifact-tab-download-button-background-color: #8ab4f8;
  --artifact-tab-white-separator-border-top-color: white;
  --artifact-tab-version-select-container-background-color: #212123;
  --artifact-tab-link-style-button-color: #007bff;
  --artifact-tab-link-style-button-hover-color: #0056b3;
  --artifact-tab-link-style-button-focus-outline-color: #007bff;
  --artifact-tab-link-style-button-active-color: #004085;
  --artifact-tab-link-style-button-disabled-color: #6c757d;
  --audio-player-container-background-color: #f0f0f0;
  --audio-player-container-box-shadow-color: rgba(0, 0, 0, 0.1);
  --audio-player-custom-controls-button-background-color: #007bff;
  --audio-player-custom-controls-button-color: white;
  --audio-player-custom-controls-button-hover-background-color: #0056b3;
  --chat-drawer-container-background-color: #131314;
  --chat-event-container-color: white;
  --chat-card-background-color: #131314;
  --chat-function-event-button-background-color: white;
  --chat-function-event-button-highlight-background-color: rgb(15, 82, 35);
  --chat-function-event-button-highlight-border-color: rgb(15, 82, 35);
  --chat-function-event-button-highlight-color: white;
  --chat-user-message-message-card-background-color: #004a77;
  --chat-user-message-message-card-color: white;
  --chat-bot-message-message-card-background-color: #303030;
  --chat-bot-message-message-card-color: white;
  --chat-bot-message-focus-within-message-card-background-color: #131314;
  --chat-bot-message-focus-within-message-card-border-color: #8ab4f8;
  --chat-message-textarea-background-color: #303030;
  --chat-message-textarea-focus-background-color: #131314;
  --chat-eval-compare-container-background-color: #484848;
  --chat-actual-result-border-right-color: #8a8686;
  --chat-eval-response-header-border-bottom-color: #8a8686;
  --chat-header-expected-color: #44c265;
  --chat-header-actual-color: #ff8983;
  --chat-eval-pass-color: #44c265;
  --chat-eval-fail-color: #ff8983;
  --chat-side-drawer-background-color: #1b1b1b;
  --chat-side-drawer-color: white;
  --chat-file-item-background-color: #eee;
  --chat-empty-state-container-color: #eee;
  --chat-warning-color: #ffc185;
  --chat-error-color: #ff4545;
  --chat-mat-mdc-unelevated-button-color: #202124;
  --chat-mat-mdc-unelevated-button-background-color: #8ab4f8;
  --chat-mdc-linear-progress-buffer-dots-background-color: white;
  --chat-mat-mdc-text-field-wrapper-border-color: #8e918f;
  --chat-segment-key-color: lightgray;
  --chat-bottom-resize-handler-background-color: #5f6368;
  --chat-readonly-badge-background-color: #ff8983;
  --chat-readonly-badge-color: #202124;
  --chat-trace-detail-container-background-color: #1b1b1b;
  --chat-toolbar-background-color: #1b1b1b;
  --chat-toolbar-edit-mode-background-color: #44c2651a;
  --chat-toolbar-session-text-color: #fdfdfd;
  --chat-toolbar-session-id-color: #9aa0a6;
  --chat-toolbar-icon-color: #c4c7c5;
  --chat-toolbar-new-session-color: #9aa0a6;
  --chat-toolbar-sse-toggle-label-text-color: #e8eaed;
  --chat-toolbar-sse-toggle-unselected-track-color: #5f6368;
  --chat-toolbar-sse-toggle-unselected-handle-color: #9aa0a6;
  --chat-toolbar-sse-toggle-selected-track-color: #8ab4f9;
  --chat-toolbar-sse-toggle-selected-handle-color: #1b73e8;
  --chat-toolbar-sse-toggle-track-outline-color: #1b73e8;
  --chat-mat-drawer-border-right-color: #444746;
  --edit-json-dialog-container-box-shadow-color: rgba(0, 0, 0, 0.4);
  --eval-tab-eval-set-actions-color: #9aa0a6;
  --eval-tab-empty-eval-info-background-color: #202124;
  --eval-tab-empty-eval-info-box-shadow-color1: rgba(0, 0, 0, 0.15);
  --eval-tab-empty-eval-info-box-shadow-color2: rgba(0, 0, 0, 0.3);
  --eval-tab-info-title-color: #e8eaed;
  --eval-tab-info-detail-color: #e8eaed;
  --eval-tab-info-create-color: #8ab4f8;
  --eval-tab-selected-eval-case-color: #8ab4f8;
  --eval-tab-save-session-btn-background-color1: rgba(138, 180, 248, 0.24);
  --eval-tab-save-session-btn-background-color2: #202124;
  --eval-tab-save-session-btn-text-color: #d2e3fc;
  --eval-tab-run-eval-btn-border-color: #5f6368;
  --eval-tab-run-eval-btn-color: #8ab4f8;
  --eval-tab-run-eval-btn-hover-background-color: #202124;
  --eval-tab-result-btn-border-color: #5f6368;
  --eval-tab-result-btn-hover-background-color: #202124;
  --eval-tab-result-btn-pass-color: #44c265;
  --eval-tab-result-btn-fail-color: #ff8983;
  --eval-tab-status-card-background-color: #2d2d2d;
  --eval-tab-status-card-timestamp-color: #e0e0e0;
  --eval-tab-status-card-metric-color: #bbb;
  --eval-tab-status-card-failed-color: #ff6b6b;
  --eval-tab-status-card-separator-color: #666;
  --eval-tab-status-card-passed-color: #63e6be;
  --eval-tab-status-card-action-mat-icon-color: #bdbdbd;
  --eval-tab-status-card-icon-color: #bdbdbd;
  --run-eval-config-dialog-container-box-shadow-color: rgba(0, 0, 0, 0.4);
  --run-eval-config-dialog-threshold-slider-active-track-color: #4285f4;
  --run-eval-config-dialog-threshold-slider-inactive-track-color: #616161;
  --run-eval-config-dialog-threshold-slider-handle-color: #4285f4;
  --run-eval-config-dialog-threshold-slider-ripple-color: #4285f4;
  --run-eval-config-dialog-mdc-slider-thumb-background-color: black;
  --event-tab-events-wrapper-color: #9aa0a6;
  --event-tab-event-index-color: #80868b;
  --event-tab-event-list-active-indicator-color: orange;
  --event-tab-event-list-list-item-container-color: #2b2b2f;
  --event-tab-mdc-list-item-border-color: #5f6368;
  --event-tab-mdc-list-item-hover-background-color: #1c1b1c;
  --trace-chart-trace-label-color: #e3e3e3;
  --trace-chart-trace-bar-background-color: #2f4d65;
  --trace-chart-trace-bar-color: #8dabbf;
  --trace-chart-trace-duration-color: #888;
  --trace-chart-vertical-line-background-color: #ccc;
  --trace-chart-horizontal-line-background-color: #ccc;
  --session-tab-session-wrapper-color: #9aa0a6;
  --session-tab-session-item-background-color: #303030;
  --session-tab-session-item-hover-background-color: #141414;
  --session-tab-session-item-current-background-color: #004a77;
  --session-tab-session-id-color: #e8eaed;
  --session-tab-session-date-color: #9aa0a6;
  --side-panel-button-filled-container-color: #89b4f8;
  --side-panel-button-filled-label-text-color: black;
  --side-panel-mat-icon-color: #bdc1c6;
  --side-panel-resize-handler-background-color: #5f6368;
  --side-panel-details-panel-container-background-color: #242424;
  --side-panel-details-content-color: white;
  --side-panel-powered-by-adk-color: grey;
  --side-panel-app-select-container-background-color: #212123;
  --side-panel-select-placeholder-text-color: #8ab4f8;
  --side-panel-select-enabled-trigger-text-color: #8ab4f8;
  --side-panel-select-enabled-arrow-color: #8ab4f8;
  --side-panel-app-name-option-color: #9aa0a6;
  --trace-tab-trace-title-color: #9aa0a6;
  --trace-tab-trace-label-color: #e3e3e3;
  --trace-tab-trace-bar-background-color: #2f4d65;
  --trace-tab-trace-bar-color: #8dabbf;
  --trace-tab-trace-duration-color: #888;
  --trace-tab-vertical-line-background-color: #ccc;
  --trace-tab-horizontal-line-background-color: #ccc;
  --trace-tab-trace-item-container-background-color: #333537;
  --trace-tab-trace-item-header-focus-state-layer-color: rgba(138, 180, 248, 0.12);
  --trace-tab-trace-item-header-description-color: #8e918f;
  --trace-tab-mat-expansion-panel-header-focus-background-color: #444746;
  --trace-tab-mat-expansion-panel-header-background-color: #444746;
  --trace-tab-mat-expansion-panel-header-hover-background-color: #444746;
  --trace-event-json-viewer-container-background-color: #1b1b1b;
  --trace-tree-trace-label-color: #e3e3e3;
  --trace-tree-trace-bar-background-color: #2f4d65;
  --trace-tree-trace-bar-color: #8dabbf;
  --trace-tree-short-trace-bar-duration-color: #8dabbf;
  --trace-tree-trace-duration-color: #888;
  --trace-tree-trace-row-hover-background-color: #3b3d3c;
  --trace-tree-trace-row-selected-background-color: #3b3d3c;
  --trace-tree-vertical-line-background-color: #ccc;
  --trace-tree-horizontal-line-background-color: #ccc;
  --trace-tree-invocation-id-container-color: #9aa0a6;
  --trace-tree-trace-row-left-span-div-color: white;
  --trace-tree-trace-row-left-is-event-row-color: #8ab4f8;

  // Builder mode custom properties - Dark theme
  --builder-container-background-color: #131314;
  --builder-panel-background-color: #202124;
  --builder-tabs-background-color: #202124;
  --builder-card-background-color: #303030;
  --builder-secondary-background-color: #333537;
  --builder-tertiary-background-color: #1b1b1b;
  --builder-hover-background-color: #141414;
  --builder-border-color: #444746;
  --builder-text-primary-color: #e8eaed;
  --builder-text-secondary-color: #9aa0a6;
  --builder-text-tertiary-color: #c4c7c5;
  --builder-text-muted-color: #5c5f5e;
  --builder-text-link-color: #aecbfa;
  --builder-breadcrumb-separator-color: #666;
  --builder-form-field-background-color: #333537;
  --builder-tool-chip-background-color: #303030;
  --builder-tool-chip-hover-color: #3c4043;
  --builder-callback-chip-background-color: #333537;
  --builder-callback-chip-text-color: #f1f3f4;
  --builder-callback-chip-type-color: #8f9aa6;
  --builder-callback-chip-name-color: #f5f7f9;
  --builder-expansion-background-color: #333537;
  --builder-expansion-header-description-color: #8e918f;
  --builder-expansion-hover-color: #444746;
  --builder-menu-background-color: #303030;
  --builder-menu-item-hover-color: #444746;
  --builder-menu-divider-color: #444746;
  --builder-button-primary-background-color: #8ab4f8;
  --builder-button-primary-text-color: #202124;
  --builder-button-primary-hover-color: #aecbfa;
  --builder-button-secondary-text-color: #9aa0a6;
  --builder-button-secondary-border-color: rgba(154, 160, 166, 0.3);
  --builder-button-secondary-hover-background-color: rgba(154, 160, 166, 0.1);
  --builder-button-secondary-hover-text-color: #e8eaed;
  --builder-add-button-background-color: rgba(138, 180, 248, 0.24);
  --builder-add-button-text-color: #d2e3fc;
  --builder-icon-color: #f1f3f4;
  --builder-assistant-panel-background-color: #2b2b2b;
  --builder-assistant-panel-header-background-color: #292929;
  --builder-assistant-panel-border-color: #3c3c3c;
  --builder-assistant-input-background-color: #1a1a1a;
  --builder-assistant-input-text-color: #e0e0e0;
  --builder-assistant-input-placeholder-color: #808080;
  --builder-assistant-user-message-background-color: #1a1a1a;
  --builder-assistant-user-message-border-color: #404040;
  --builder-assistant-user-message-text-color: #e3e3e3;
  --builder-assistant-bot-message-text-color: #d4d4d4;
  --builder-assistant-send-button-color: #888888;
  --builder-assistant-send-button-hover-color: #b0b0b0;
  --builder-assistant-send-button-disabled-color: #4a4a4a;

  // Canvas-specific custom properties - Dark theme
  --builder-canvas-container-background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
  --builder-canvas-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --builder-canvas-header-background: linear-gradient(90deg, #1e1e1e 0%, #2a2a2a 100%);
  --builder-canvas-header-title-gradient: linear-gradient(45deg, #8ab4f8, #4285f4);
  --builder-canvas-workspace-background: #131314;
  --builder-canvas-instruction-background: rgba(19, 19, 20, 0.9);
  --builder-canvas-instruction-border: rgba(138, 180, 248, 0.2);
  --builder-canvas-node-background: rgba(85, 107, 116, 0.4);
  --builder-canvas-node-border: #474747;
  --builder-canvas-node-hover-border: #666;
  --builder-canvas-node-chip-outline: rgba(255, 255, 255, 0.1);
  --builder-canvas-node-badge-background: linear-gradient(135deg, rgba(0, 187, 234, 0.2), rgba(0, 78, 122, 0.4));
  --builder-canvas-group-background: #1c1c1c;
  --builder-canvas-group-border: #3e3e3e;
  --builder-canvas-handle-fill: rgba(0, 0, 0, 1);
  --builder-canvas-reconnect-handle-fill: rgba(0, 187, 234, 0.15);
  --builder-canvas-workflow-chip-background: rgba(0, 187, 234, 0.2);
  --builder-canvas-workflow-chip-border: rgba(0, 187, 234, 0.4);
  --builder-canvas-add-btn-background: radial-gradient(circle at 50% 50%, #1f2330 0%, #131314 100%);
  --builder-canvas-add-btn-hover-background: radial-gradient(circle at 50% 50%, #222a3a 0%, #16181d 100%);
  --builder-canvas-add-btn-shadow: 0 4px 12px rgba(0, 187, 234, 0.35);
  --builder-canvas-empty-group-background: rgba(255, 255, 255, 0.02);
  --builder-canvas-empty-group-border: rgba(0, 187, 234, 0.3);
  --builder-canvas-empty-group-hover-background: rgba(255, 255, 255, 0.04);
  --builder-canvas-empty-group-hover-border: rgba(0, 187, 234, 0.5);
  --builder-canvas-empty-group-btn-background: rgba(0, 187, 234, 0.1);
  --builder-canvas-empty-group-btn-hover-background: rgba(0, 187, 234, 0.2);
  --builder-button-background-color: rgba(138, 180, 248, 0.1);
  --builder-button-border-color: rgba(138, 180, 248, 0.3);
  --builder-button-text-color: #8ab4f8;
  --builder-button-hover-background-color: rgba(138, 180, 248, 0.2);
  --builder-button-hover-border-color: #8ab4f8;
  --builder-item-hover-color: rgba(138, 180, 248, 0.1);
  --builder-chip-background-color: rgba(138, 180, 248, 0.2);
  --builder-accent-color: #00bbea;
  --builder-tool-item-background-color: rgba(255, 255, 255, 0.05);
  --builder-tool-item-border-color: rgba(255, 255, 255, 0.1);
  --builder-tool-item-hover-background-color: rgba(255, 255, 255, 0.1);
  --mat-table-row-item-label-text-color: #fff;
  --mat-table-header-headline-color: #fff;

  @include mat.progress-spinner-overrides(
    (
      active-indicator-color: #a8c7fa,
      size: 80,
    )
  );
}

// Light theme progress spinner and custom properties
html.light-theme {
  --chat-panel-function-event-button-background-color: #202124;
  --chat-panel-function-event-button-highlight-background-color: #0f5223;
  --chat-panel-function-event-button-highlight-border-color: #0f5223;
  --chat-panel-function-event-button-highlight-color: white;
  --chat-panel-user-message-message-card-background-color: #d5e3ff;
  --chat-panel-user-message-message-card-color: #202124;
  --chat-panel-bot-message-message-card-background-color: #f3f0f0;
  --chat-panel-bot-message-message-card-color: #202124;
  --chat-panel-bot-message-focus-within-message-card-background-color: #ffffff;
  --chat-panel-bot-message-focus-within-message-card-border-color: #305f9d;
  --chat-panel-message-textarea-background-color: #f3f0f0;
  --chat-panel-message-textarea-focus-background-color: #ffffff;
  --chat-panel-eval-compare-container-background-color: #e5e2e2;
  --chat-panel-actual-result-border-right-color: #c8c6c6;
  --chat-panel-eval-response-header-border-bottom-color: #c8c6c6;
  --chat-panel-header-expected-color: #0f5223;
  --chat-panel-header-actual-color: #ba1a1a;
  --chat-panel-eval-pass-color: #0f5223;
  --chat-panel-eval-fail-color: #ba1a1a;
  --chat-panel-input-field-textarea-color: #202124;
  --chat-panel-input-field-textarea-placeholder-color: #5f5e5e;
  --chat-panel-input-field-textarea-caret-color: #202124;
  --chat-panel-input-field-button-color: #202124;
  --chat-panel-input-field-button-background-color: #e5e2e2;
  --chat-panel-mat-mdc-mini-fab-background-color: #305f9d;
  --chat-panel-mat-mdc-mini-fab-mat-icon-color: white;
  --chat-panel-input-field-mat-mdc-text-field-wrapper-border-color: #adabab;
  --chat-panel-delete-button-background-color: rgba(255, 255, 255, 0.9);
  --chat-panel-delete-button-color: #202124;
  --chat-panel-file-container-background-color: #f3f0f0;
  --chat-panel-thought-chip-background-color: #305f9d;
  --chat-panel-link-style-button-color: #305f9d;
  --artifact-tab-download-button-background-color: #305f9d;
  --artifact-tab-white-separator-border-top-color: #202124;
  --artifact-tab-version-select-container-background-color: #f3f0f0;
  --artifact-tab-link-style-button-color: #305f9d;
  --artifact-tab-link-style-button-hover-color: #0f4784;
  --artifact-tab-link-style-button-focus-outline-color: #305f9d;
  --artifact-tab-link-style-button-active-color: #003061;
  --artifact-tab-link-style-button-disabled-color: #929090;
  --audio-player-container-background-color: #f3f0f0;
  --audio-player-container-box-shadow-color: rgba(0, 0, 0, 0.1);
  --audio-player-custom-controls-button-background-color: #305f9d;
  --audio-player-custom-controls-button-color: white;
  --audio-player-custom-controls-button-hover-background-color: #0f4784;
  --chat-drawer-container-background-color: #ffffff;
  --chat-event-container-color: #202124;
  --chat-card-background-color: #ffffff;
  --chat-function-event-button-background-color: #202124;
  --chat-function-event-button-highlight-background-color: #0f5223;
  --chat-function-event-button-highlight-border-color: #0f5223;
  --chat-function-event-button-highlight-color: white;
  --chat-user-message-message-card-background-color: #d5e3ff;
  --chat-user-message-message-card-color: #202124;
  --chat-bot-message-message-card-background-color: #f3f0f0;
  --chat-bot-message-message-card-color: #202124;
  --chat-bot-message-focus-within-message-card-background-color: #ffffff;
  --chat-bot-message-focus-within-message-card-border-color: #305f9d;
  --chat-message-textarea-background-color: #f3f0f0;
  --chat-message-textarea-focus-background-color: #ffffff;
  --chat-eval-compare-container-background-color: #e5e2e2;
  --chat-actual-result-border-right-color: #c8c6c6;
  --chat-eval-response-header-border-bottom-color: #c8c6c6;
  --chat-header-expected-color: #0f5223;
  --chat-header-actual-color: #ba1a1a;
  --chat-eval-pass-color: #0f5223;
  --chat-eval-fail-color: #ba1a1a;
  --chat-side-drawer-background-color: #f3f0f0;
  --chat-side-drawer-color: #202124;
  --chat-file-item-background-color: #e5e2e2;
  --chat-empty-state-container-color: #202124;
  --chat-warning-color: #93000a;
  --chat-error-color: #ba1a1a;
  --chat-mat-mdc-unelevated-button-color: white;
  --chat-mat-mdc-unelevated-button-background-color: #305f9d;
  --chat-mdc-linear-progress-buffer-dots-background-color: #202124;
  --chat-mat-mdc-text-field-wrapper-border-color: #adabab;
  --chat-segment-key-color: #5f5e5e;
  --chat-bottom-resize-handler-background-color: #adabab;
  --chat-readonly-badge-background-color: #ba1a1a;
  --chat-readonly-badge-color: white;
  --chat-trace-detail-container-background-color: #f3f0f0;
  --chat-toolbar-background-color: #f3f0f0;
  --chat-toolbar-edit-mode-background-color: rgba(15, 82, 35, 0.1);
  --chat-toolbar-session-text-color: #202124;
  --chat-toolbar-session-id-color: #5f5e5e;
  --chat-toolbar-icon-color: #5f5e5e;
  --chat-toolbar-new-session-color: #5f5e5e;
  --chat-toolbar-sse-toggle-label-text-color: #202124;
  --chat-toolbar-sse-toggle-unselected-track-color: #c8c6c6;
  --chat-toolbar-sse-toggle-unselected-handle-color: #5f5e5e;
  --chat-toolbar-sse-toggle-selected-track-color: #82adf0;
  --chat-toolbar-sse-toggle-selected-handle-color: #305f9d;
  --chat-toolbar-sse-toggle-track-outline-color: #305f9d;
  --chat-mat-drawer-border-right-color: #c8c6c6;
  --edit-json-dialog-container-box-shadow-color: rgba(0, 0, 0, 0.2);
  --eval-tab-eval-set-actions-color: #5f5e5e;
  --eval-tab-empty-eval-info-background-color: #f3f0f0;
  --eval-tab-empty-eval-info-box-shadow-color1: rgba(0, 0, 0, 0.08);
  --eval-tab-empty-eval-info-box-shadow-color2: rgba(0, 0, 0, 0.15);
  --eval-tab-info-title-color: #202124;
  --eval-tab-info-detail-color: #202124;
  --eval-tab-info-create-color: #305f9d;
  --eval-tab-selected-eval-case-color: #305f9d;
  --eval-tab-save-session-btn-background-color1: rgba(48, 95, 157, 0.12);
  --eval-tab-save-session-btn-background-color2: #f3f0f0;
  --eval-tab-save-session-btn-text-color: #0f4784;
  --eval-tab-run-eval-btn-border-color: #adabab;
  --eval-tab-run-eval-btn-color: #305f9d;
  --eval-tab-run-eval-btn-hover-background-color: #f3f0f0;
  --eval-tab-result-btn-border-color: #adabab;
  --eval-tab-result-btn-hover-background-color: #f3f0f0;
  --eval-tab-result-btn-pass-color: #0f5223;
  --eval-tab-result-btn-fail-color: #ba1a1a;
  --eval-tab-status-card-background-color: #f3f0f0;
  --eval-tab-status-card-timestamp-color: #5f5e5e;
  --eval-tab-status-card-metric-color: #787777;
  --eval-tab-status-card-failed-color: #ba1a1a;
  --eval-tab-status-card-separator-color: #c8c6c6;
  --eval-tab-status-card-passed-color: #0f5223;
  --eval-tab-status-card-action-mat-icon-color: #5f5e5e;
  --eval-tab-status-card-icon-color: #5f5e5e;
  --run-eval-config-dialog-container-box-shadow-color: rgba(0, 0, 0, 0.2);
  --run-eval-config-dialog-threshold-slider-active-track-color: #305f9d;
  --run-eval-config-dialog-threshold-slider-inactive-track-color: #c8c6c6;
  --run-eval-config-dialog-threshold-slider-handle-color: #305f9d;
  --run-eval-config-dialog-threshold-slider-ripple-color: #305f9d;
  --run-eval-config-dialog-mdc-slider-thumb-background-color: white;
  --event-tab-events-wrapper-color: #5f5e5e;
  --event-tab-event-index-color: #787777;
  --event-tab-event-list-active-indicator-color: #ff5449;
  --event-tab-event-list-list-item-container-color: #f3f0f0;
  --event-tab-mdc-list-item-border-color: #c8c6c6;
  --event-tab-mdc-list-item-hover-background-color: #e5e2e2;
  --trace-chart-trace-label-color: #202124;
  --trace-chart-trace-bar-background-color: #a7c8ff;
  --trace-chart-trace-bar-color: #305f9d;
  --trace-chart-trace-duration-color: #787777;
  --trace-chart-vertical-line-background-color: #c8c6c6;
  --trace-chart-horizontal-line-background-color: #c8c6c6;
  --session-tab-session-wrapper-color: #5f5e5e;
  --session-tab-session-item-background-color: #f3f0f0;
  --session-tab-session-item-hover-background-color: #e5e2e2;
  --session-tab-session-item-current-background-color: #d5e3ff;
  --session-tab-session-id-color: #202124;
  --session-tab-session-date-color: #5f5e5e;
  --side-panel-button-filled-container-color: #305f9d;
  --side-panel-button-filled-label-text-color: white;
  --side-panel-mat-icon-color: #5f5e5e;
  --side-panel-resize-handler-background-color: #adabab;
  --side-panel-details-panel-container-background-color: #f3f0f0;
  --side-panel-details-content-color: #202124;
  --side-panel-powered-by-adk-color: #787777;
  --side-panel-app-select-container-background-color: #ffffff;
  --side-panel-select-placeholder-text-color: #305f9d;
  --side-panel-select-enabled-trigger-text-color: #305f9d;
  --side-panel-select-enabled-arrow-color: #305f9d;
  --side-panel-app-name-option-color: #5f5e5e;
  --trace-tab-trace-title-color: #5f5e5e;
  --trace-tab-trace-label-color: #202124;
  --trace-tab-trace-bar-background-color: #a7c8ff;
  --trace-tab-trace-bar-color: #305f9d;
  --trace-tab-trace-duration-color: #787777;
  --trace-tab-vertical-line-background-color: #c8c6c6;
  --trace-tab-horizontal-line-background-color: #c8c6c6;
  --trace-tab-trace-item-container-background-color: #f3f0f0;
  --trace-tab-trace-item-header-focus-state-layer-color: rgba(48, 95, 157, 0.12);
  --trace-tab-trace-item-header-description-color: #787777;
  --trace-tab-mat-expansion-panel-header-focus-background-color: #e5e2e2;
  --trace-tab-mat-expansion-panel-header-background-color: #e5e2e2;
  --trace-tab-mat-expansion-panel-header-hover-background-color: #e5e2e2;
  --trace-event-json-viewer-container-background-color: #ffffff;
  --trace-tree-trace-label-color: #202124;
  --trace-tree-trace-bar-background-color: #a7c8ff;
  --trace-tree-trace-bar-color: #305f9d;
  --trace-tree-short-trace-bar-duration-color: #305f9d;
  --trace-tree-trace-duration-color: #787777;
  --trace-tree-trace-row-hover-background-color: #e5e2e2;
  --trace-tree-trace-row-selected-background-color: #e5e2e2;
  --trace-tree-vertical-line-background-color: #c8c6c6;
  --trace-tree-horizontal-line-background-color: #c8c6c6;
  --trace-tree-invocation-id-container-color: #5f5e5e;
  --trace-tree-trace-row-left-span-div-color: #202124;
  --trace-tree-trace-row-left-is-event-row-color: #305f9d;

  // Builder mode custom properties - Light theme
  --builder-container-background-color: #ffffff;
  --builder-panel-background-color: #f3f0f0;
  --builder-tabs-background-color: #f3f0f0;
  --builder-card-background-color: #ffffff;
  --builder-secondary-background-color: #e5e2e2;
  --builder-tertiary-background-color: #f3f0f0;
  --builder-hover-background-color: #dcd9d9;
  --builder-border-color: #c8c6c6;
  --builder-text-primary-color: #202124;
  --builder-text-secondary-color: #5f5e5e;
  --builder-text-tertiary-color: #787777;
  --builder-text-muted-color: #929090;
  --builder-text-link-color: #305f9d;
  --builder-breadcrumb-separator-color: #c8c6c6;
  --builder-form-field-background-color: #e5e2e2;
  --builder-tool-chip-background-color: #ffffff;
  --builder-tool-chip-hover-color: #e5e2e2;
  --builder-callback-chip-background-color: #e5e2e2;
  --builder-callback-chip-text-color: #202124;
  --builder-callback-chip-type-color: #5f5e5e;
  --builder-callback-chip-name-color: #202124;
  --builder-expansion-background-color: #e5e2e2;
  --builder-expansion-header-description-color: #787777;
  --builder-expansion-hover-color: #dcd9d9;
  --builder-menu-background-color: #ffffff;
  --builder-menu-item-hover-color: #e5e2e2;
  --builder-menu-divider-color: #c8c6c6;
  --builder-button-primary-background-color: #305f9d;
  --builder-button-primary-text-color: #ffffff;
  --builder-button-primary-hover-color: #0f4784;
  --builder-button-secondary-text-color: #5f5e5e;
  --builder-button-secondary-border-color: rgba(95, 94, 94, 0.3);
  --builder-button-secondary-hover-background-color: rgba(95, 94, 94, 0.1);
  --builder-button-secondary-hover-text-color: #202124;
  --builder-add-button-background-color: rgba(48, 95, 157, 0.12);
  --builder-add-button-text-color: #0f4784;
  --builder-icon-color: #202124;
  --builder-assistant-panel-background-color: #f3f0f0;
  --builder-assistant-panel-header-background-color: #e5e2e2;
  --builder-assistant-panel-border-color: #c8c6c6;
  --builder-assistant-input-background-color: #ffffff;
  --builder-assistant-input-text-color: #202124;
  --builder-assistant-input-placeholder-color: #929090;
  --builder-assistant-user-message-background-color: #d5e3ff;
  --builder-assistant-user-message-border-color: #a7c8ff;
  --builder-assistant-user-message-text-color: #202124;
  --builder-assistant-bot-message-text-color: #202124;
  --builder-assistant-send-button-color: #5f5e5e;
  --builder-assistant-send-button-hover-color: #305f9d;
  --builder-assistant-send-button-disabled-color: #c8c6c6;

  // Canvas-specific custom properties - Light theme
  --builder-canvas-container-background: linear-gradient(135deg, #f8f9fa 0%, #e8eaed 100%);
  --builder-canvas-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --builder-canvas-header-background: linear-gradient(90deg, #ffffff 0%, #f3f0f0 100%);
  --builder-canvas-header-title-gradient: linear-gradient(45deg, #305f9d, #0f4784);
  --builder-canvas-workspace-background: #ffffff;
  --builder-canvas-instruction-background: rgba(255, 255, 255, 0.95);
  --builder-canvas-instruction-border: rgba(48, 95, 157, 0.3);
  --builder-canvas-node-background: rgba(229, 226, 226, 0.6);
  --builder-canvas-node-border: #c8c6c6;
  --builder-canvas-node-hover-border: #adabab;
  --builder-canvas-node-chip-outline: rgba(200, 198, 198, 0.3);
  --builder-canvas-node-badge-background: linear-gradient(135deg, rgba(48, 95, 157, 0.15), rgba(15, 71, 132, 0.2));
  --builder-canvas-group-background: #f3f0f0;
  --builder-canvas-group-border: #c8c6c6;
  --builder-canvas-handle-fill: rgba(255, 255, 255, 1);
  --builder-canvas-reconnect-handle-fill: rgba(48, 95, 157, 0.15);
  --builder-canvas-workflow-chip-background: rgba(48, 95, 157, 0.15);
  --builder-canvas-workflow-chip-border: rgba(48, 95, 157, 0.3);
  --builder-canvas-add-btn-background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f8f9fa 100%);
  --builder-canvas-add-btn-hover-background: radial-gradient(circle at 50% 50%, #f3f0f0 0%, #e8eaed 100%);
  --builder-canvas-add-btn-shadow: 0 4px 12px rgba(48, 95, 157, 0.25);
  --builder-canvas-empty-group-background: rgba(48, 95, 157, 0.03);
  --builder-canvas-empty-group-border: rgba(48, 95, 157, 0.3);
  --builder-canvas-empty-group-hover-background: rgba(48, 95, 157, 0.06);
  --builder-canvas-empty-group-hover-border: rgba(48, 95, 157, 0.5);
  --builder-canvas-empty-group-btn-background: rgba(48, 95, 157, 0.1);
  --builder-canvas-empty-group-btn-hover-background: rgba(48, 95, 157, 0.2);
  --builder-button-background-color: rgba(48, 95, 157, 0.1);
  --builder-button-border-color: rgba(48, 95, 157, 0.3);
  --builder-button-text-color: #305f9d;
  --builder-button-hover-background-color: rgba(48, 95, 157, 0.2);
  --builder-button-hover-border-color: #305f9d;
  --builder-item-hover-color: rgba(48, 95, 157, 0.1);
  --builder-chip-background-color: rgba(48, 95, 157, 0.15);
  --builder-accent-color: #305f9d;
  --builder-tool-item-background-color: #f6f3f3;
  --builder-tool-item-border-color: #c8c6c6;
  --builder-tool-item-hover-background-color: #dcd9d9;

  @include mat.progress-spinner-overrides(
    (
      active-indicator-color: #305f9d,
      size: 80,
    )
  );
}

// Form field overrides for dark theme
html.dark-theme {
  @include mat.form-field-overrides(
    (
      disabled-input-text-placeholder-color: orange,
      filled-active-indicator-color: red,
      outlined-outline-color: #cccccc,
      outlined-input-text-color: #cccccc,
      outlined-label-text-color: #cccccc,
      outlined-hover-label-text-color: #cccccc,
      outlined-focus-label-text-color: #cccccc,
      outlined-disabled-label-text-color: #cccccc,
      outlined-disabled-input-text-color: #cccccc,
      outlined-disabled-outline-color: #cccccc,
      outlined-caret-color: #cccccc,
    )
  );
}

// Form field overrides for light theme
html.light-theme {
  @include mat.form-field-overrides(
    (
      disabled-input-text-placeholder-color: #ff8983,
      filled-active-indicator-color: #ba1a1a,
      outlined-outline-color: #787777,
      outlined-input-text-color: #202124,
      outlined-label-text-color: #5f5e5e,
      outlined-hover-label-text-color: #202124,
      outlined-focus-label-text-color: #305f9d,
      outlined-disabled-label-text-color: #929090,
      outlined-disabled-input-text-color: #929090,
      outlined-disabled-outline-color: #c8c6c6,
      outlined-caret-color: #305f9d,
    )
  );
}

.mdc-line-ripple {
  display: none;
}

// Tooltip styling to prevent overlap
.mat-mdc-tooltip {
  z-index: 10000 !important;
  max-width: 300px;
}

// Ensure Material select panel has proper background
.mat-mdc-select-panel {
  background-color: var(--mat-select-panel-background-color) !important;
}

// Fix expansion panel box shadow in light theme
html.light-theme {
  .mat-expansion-panel {
    box-shadow: none !important;
    border: 1px solid #e0e0e0;
    border-radius: 4px !important;

    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }

  .mat-expansion-panel-header {
    border-bottom: none !important;
  }
}

// Fix expansion panel box shadow in dark theme
html.dark-theme {
  .mat-expansion-panel {
    box-shadow: none !important;
    border: 1px solid #444746;
    border-radius: 4px !important;

    &:not(:last-child) {
      margin-bottom: 8px;
    }
  }

  .mat-expansion-panel-header {
    border-bottom: none !important;
  }
}
